const  {useState} = React;


const Button = (props)=> (
    <div>
        <button style={{background : props.color}} onClick={()=>props.callback(props.color)}></button>
    </div>
)


function App() {
    const [bg, setBg] = useState("skyblue");
    const [partyMode, setPartyMode] = useState("none");
    
    return (
      <div className="body" 
        style={bg == "skyblue"
                ? { background: "skyblue" }
                : { background: bg,animation: partyMode}
            }>
        
            <button className="easterEgg" onClick={()=>setPartyMode( "rotate 500ms linear 20" )}>
                    Party Mode
            </button>
            <button className="reset" onClick={()=>setBg("skyblue")} 
                    style={bg === "skyblue" ? {transform: "translateY(0px)"} : { transform: "translateY(60px)" }}    
            >
                    RESET
            </button>
            <div className="container" style={{background: bg,animation : partyMode}}>
                <Button color="red" callback={(color)=>setBg(color)}></Button>
                <Button color="green" callback={(color)=>setBg(color)}></Button>
                <Button color="gold" callback={(color)=>setBg(color)}></Button>
            </div>
            
      </div>
    );
  }





ReactDOM.render(React.createElement(App, null), document.getElementById("app"));
